import React from 'react'
import './index.css'
import { nanoid } from 'nanoid'
export default function Header({todoList,setTodoList}) {
  const pulishHandle =(e)=>{
    //确定是否是回车
    if(e.keyCode  !==  13 ) return
    //判断不能有空格
    const todoValue = e.target.value.trim()
    if(!todoValue) return alert('请输入正确格式')
    //创建对象
    const newTodo =  { id: nanoid(), todo:todoValue , done: false }
    //添加数据
      setTodoList([newTodo,...todoList])
    //清理空格
      e.target.value =''
  }






  return (
    <div className="todo-header">
      <input type="text" onKeyUp={pulishHandle} placeholder="请输入你的任务名称，按回车键确认" />
    </div>
  )
}
